<script setup>
import { ref } from 'vue'
import FanTabs from '..'

const tabs = ['百度', 'Google', 'Bing', '百度一下', 'Bing', 'Google', '百度']
const active = ref(0)
</script>

<template>
	<demo-block title="基础用法">
		<FanTabs :tabs="tabs.slice(0, 4)" v-model:active="active" active-strong></FanTabs>
	</demo-block>

	<demo-block title="收缩布局">
		<FanTabs
			:tabs="tabs.slice(0, 4)"
			v-model:active="active"
			shrink
			active-strong
			active-color="#111"
			label-pad="9px"
			side-pad="3px"
			indicator-width="20px"
			indicator-height="3px"
			indicator-color="red"
		></FanTabs>
	</demo-block>

	<demo-block title="滚动">
		<FanTabs :tabs="tabs" v-model:active="active" active-strong></FanTabs>
	</demo-block>

	<demo-block title="自定义Tab">
		<FanTabs :tabs="tabs" v-model:active="active" active-color="#fff" :indicator="false" label-pad="1px">
			<template #default="{ active, item }">
				<div
					:style="
						active ? { padding: '2px 10px', background: 'orange', borderRadius: '20px' } : { padding: '2px 10px' }
					"
				>
					{{ item.label }}
				</div>
			</template>
		</FanTabs>
	</demo-block>
</template>
